import React, { useEffect } from "react"
import { Table, Space, Card, Breadcrumb, Input, Popconfirm, Button, Image, message } from 'antd';// ui组件
import { useAddress } from "../../hook/address.js"
import { DeleteOutlined, EditOutlined, ToTopOutlined } from '@ant-design/icons'; //图标
import { useHistory } from "react-router-dom";
import { useAmendAddress } from "../../hook/amendAddress.js";
const { Search } = Input;




export default () => {
    const history = useHistory();
    //自提点列表的hoock
    const [{ curPage, eachPage, rows, total, maxPage }, { getAddress, delAddress, setCurPage, setEachPage, onSearch }] = useAddress()
    // 修改数据的hoock
    const [amendAddress, { setAmend }] = useAmendAddress()


    //请求列表数据
    useEffect(() => {
        getAddress()

    }, [getAddress])


    //点击弹窗确认后 发送请求删除数据
    const confirm = async (_id) => {
        await delAddress(_id)
        getAddress()
    }

    //点击修改 跳转修改页面
    const toAmend = (record) => {
        setAmend(record)
        history.push("/info/amendAdress")
    }
    //点击上传跳转至上传页面
    const toUpImage = (record) => {
        setAmend(record)
        history.push(`/info/uploadAdress`)
    }
    //查询
    const serach = async (value) => {
        const data = await onSearch(value)
        message.success(`已为你查询到${data.length}条数据`)

    }

    const columns = [
        {
            title: '自提点',
            dataIndex: 'name',
            width: "10%"
        },
        {
            title: '地址',
            dataIndex: 'Address',
            width: '20%',
        },

        {
            title: '经度',
            dataIndex: 'longitude',
            width: "5%"
        },
        {
            title: '纬度',
            dataIndex: 'latitude',
            width: "5%"

        },
        {
            title: '支持冷冻',
            dataIndex: 'Cold_store',
            width: "8%",
            render: (text, record, index) => {

                const text1 = record.Cold_store ? "是" : "否"
                return text1
            }
        },
        {
            title: '联系方式',
            dataIndex: 'Phone',

        },
        {
            title: '营业时间',
            dataIndex: 'Open_hours',
            width: "5%"
        },
        {
            title: '商户照片',
            dataIndex: 'Image',
            width: '10%',
            render: (text, recored, index) => {
                if (recored.Image == "") {
                    return <div width={100}>
                        <span style={{ color: "blue", fontSize: 18 }}>照片未上传</span>
                    </div>
                } else {
                    return <Image src={`/res/${recored.Image}`} style={{ height: 100, width: 100 }} />
                }
            }
        },
        {
            title: ' 操作',
            dataIndex: 'option',
            render: (text, record, index) => {
                //record可以获取表格内的数据，解构拿到_id
                const { _id } = record
                return <>
                    <Popconfirm
                        title="此操作不可逆 是否确定删除?"
                        onConfirm={() => confirm(_id)}
                        // onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <Button type="primary" danger icon={<DeleteOutlined />} size={"small"}>
                            删除
                        </Button>
                    </Popconfirm>
                    <Button type="primary" icon={<EditOutlined />} style={{ marginLeft: 10 }} onClick={() => toAmend(record)} size={"small"}>
                        修改
                    </Button>
                    <Button icon={<ToTopOutlined />} style={{ marginLeft: 10 }} onClick={() => toUpImage(record)} size={"small"}>
                        图片
                    </Button>
                </>

            }
        },


    ];


    return (
        <Space direction="vertical" style={{ width: "100%" }}>
            <Card >
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>自提点</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/address" style={{ fontSize: "16px", color: "black" }}>自提点列表</a>
                    </Breadcrumb.Item>
                </Breadcrumb>

                <Search placeholder="请输入自提点查找" onSearch={serach} disabled={false} style={{ width: 200, marginTop: "20px" }} />

                <Card title="自提点列表" style={{ marginTop: 50 }} >
                    <Table
                        dataSource={rows}
                        columns={columns}
                        rowKey={(record) => record._id}
                        pagination={{
                            total,
                            current: curPage,
                            pageSize: eachPage,

                            showSizeChanger: true,
                            pageSizeOptions: ['1', '2', '5'],
                            onChange: (curPage, eachPage) => {
                                setCurPage(curPage);
                                setEachPage(eachPage);
                            },
                        }} />
                </Card>
            </Card>

        </Space>

    )
}